<template>
  <div style="width: 100%">
    <el-dropdown
      trigger="click"
      :hide-on-click="false"
      ref="dropdown"
      style="width: 100%"
      @visible-change="handleDropdownVisible"
    >
      <span class="el-dropdown-link">
        <div v-show="values && values.length > 0">
          <el-row v-for="(item, index) in values" :key="index">
            <el-col :span="10" v-show="!!item.value"
              ><span style="color: red" v-show="!!item.isRequire">*</span
              ><span>{{ item.dimensionName }}</span></el-col
            >
            <el-col :span="14" v-show="!!item.value"
              ><span>{{ item.label || item.value }}</span></el-col
            >
          </el-row>
        </div>

        <i
          v-show="!values || values.length == 0"
          class="el-icon-arrow-down el-icon--right dimension-value-icon"
          style="float: right"
        ></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item, index) in values" :key="index">
          <el-row>
            <el-col :span="10" :class="optionClass"
              ><span style="color: red" v-show="!!item.isRequire">*</span
              >{{ item.dimensionName }}</el-col
            >
            <el-col
              :class="optionClass"
              :span="12"
              v-if="
                item.dimension.dataSourceType ==
                  $enums.dataSourceType.tag.value &&
                item.tag.type == $enums.tagType.text.value
              "
              ><el-input
                :class="optionClass"
                size="small"
                v-model="item.value"
              ></el-input
            ></el-col>
            <el-col
              :class="optionClass"
              :span="12"
              v-if="
                item.dimension.dataSourceType ==
                  $enums.dataSourceType.tag.value &&
                item.tag.type == $enums.tagType.date.value
              "
              ><el-date-picker
                :class="optionClass"
                v-model="item.value"
                type="date"
                size="small"
              >
              </el-date-picker
            ></el-col>
            <el-col
              :class="optionClass"
              :span="12"
              v-if="
                item.dimension.dataSourceType ==
                  $enums.dataSourceType.tag.value &&
                item.tag.type == $enums.tagType.list.value
              "
            >
              <tag-value-select
                :tagId="item.tag.id"
                v-model="item.value"
                :class="optionClass"
                @visible-change="handlePreventEvent"
                @change="(tagItem) => handleTagValueChange(tagItem, item)"
              >
              </tag-value-select>
            </el-col>
            <el-col
              :class="optionClass"
              :span="12"
              v-if="
                item.dimension.dataSourceType ==
                $enums.dataSourceType.customer.value
              "
            >
              <customer-select
                v-model="item.value"
                :class="optionClass"
                @visible-change="handlePreventEvent"
                @change="(customer) => handleCustomerChange(customer, item)"
              >
              </customer-select>
            </el-col>
          </el-row>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import { getDimensions } from "@/api/account";
import { getTags } from "@/api/tag";
import { getCustomers } from "@/api/customer";
import tagValueSelect from "@/components/Select/tagValueSelect.vue";
import customerSelect from "@/components/Select/customerSelect.vue";
export default {
  components: {
    tagValueSelect,
    customerSelect,
  },
  data() {
    return {
      dimensions: [],
      values: [],
      tags: [],
      customers: [],
    };
  },
  methods: {
    getData() {
      let ids = this.dimensionItems.map((x) => {
        return x.id;
      });

      if (!ids || ids.length == 0) return;

      getDimensions({ ids: ids, pageIndex: 1, pageSize: 1000 }).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.dimensions = res.items;
      });
    },
    getTags() {
      let tagDimensionItems = this.dimensions.filter((x) => {
        return !!x.tagId;
      });

      if (!tagDimensionItems || tagDimensionItems.length == 0) {
        this.getValues();
        return;
      }
      let tagIds = tagDimensionItems.map((x) => {
        return x.tagId;
      });

      getTags({ ids: tagIds, pageIndex: 1, pageSize: 1000 }).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.tags = res.items;
      });
    },
    getCustomers() {
      let customerDimensionItems = this.dimensions.filter((x) => {
        return x.dataSourceType == 1;
      });

      if (!customerDimensionItems || customerDimensionItems.length == 0) {
        this.getValues();
        return;
      }

      getCustomers({ pageIndex: 1, pageSize: 1000 }).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.customers = res.items;
      });
    },

    getValues() {
      let copyDatas = JSON.parse(JSON.stringify(this.dimensionItems));

      copyDatas.forEach((element) => {
        let matchDimension = this.dimensions.find((x) => {
          return x.id == element.dimensionId;
        });

        element.dimension = matchDimension || {};

        element.tag = matchDimension
          ? this.tags.find((x) => {
              return x.id == matchDimension.tagId;
            })
          : {};

        let matchValue = this.dimensionItemValues.find((x) => {
          return (
            x.dataSourceType == element.dimension.dataSourceType &&
            (!element.tag || x.tagId == element.tag.id)
          );
        });
        element.value = matchValue ? matchValue.value : "";
        element.label = matchValue ? matchValue.label : "";
      });

      this.values = copyDatas;
      this.$refs.dropdown.show();
    },
    getTag(tagId) {
      let match = this.tags.find((x) => {
        return x.id == tagId;
      });

      return match || {};
    },
    handlePreventEvent(visible) {
      if (!visible) this.$refs.dropdown.show();
    },
    handleTagValueChange(tagItem, item) {
      item.label = tagItem.name;
    },
    handleDropdownVisible(visible) {
      if (!visible) this.$emit("change", this.values);
    },
    handleCustomerChange(customer, item) {
      item.label = customer.name;
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    dimensions: {
      handler(value) {
        if (!value || value.length == 0) {
          this.tags = [];
        } else {
          for (let i = 0; i < value.length; i++) {
            if (value[i].dataSourceType == 1) this.getCustomers();
            else if (value[i].dataSourceType == 8) this.getTags();
          }
        }
      },
    },
    tags: {
      handler(value) {
        if (value && value.length > 0) {
          this.getValues();
        }
      },
    },
    customers: {
      handler(value) {
        if (value && value.length > 0) {
          this.getValues();
        }
      },
    },
    values: {
      handler(value) {
        this.$emit("change", value);
      },
      deep: true,
    },
  },
  props: {
    dimensionItems: {
      type: Array,
      default: () => [],
    },
    dimensionItemValues: {
      type: Array,
      default: () => [],
    },
    optionClass: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped>
.dimension-value-icon {
  float: right;
  position: relative;
  top: -10px;
}
</style>
